<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>欢迎登录</title>
  <link href="css/login.css" rel="stylesheet"/>
  <link href="css/public.css" rel="stylesheet"/>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="js/vue.js"></script>
  <script src="js/element-ui.js"></script>
</head>
<body>
<div class="top">
  <div class="center">
    <div class="logo fl">
      <a href="index.html"><img src="img/tianLaiLogo.png"/></a>
    </div>
    <div class="top-hy fl">欢迎登录</div>
  </div>
</div>
<div class="tip">
  <div class="center"><span class="text">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版的《隐私政策》已经上线，将更有利于保护您的个人隐私。</span></div>
</div>
<!--横幅-->
<div class="main">
  <div class="center">
    <!-- logo -->
    <div class="loginBar commonWidth">
      <div class="logol_bj fl">
        <!--<div class="logol_rot"><img src="img/logol_rot1.png" alt=""> </div>
        <div class="logoll_link"></div>-->
        <div class="logol_header">
          <div class="logol_header_img"><img src="img/welcome.jpg" alt=""></div>
        </div>
      </div>
    </div>
    <div class="main-bj">

      <div class="fl" style="position: absolute;"></div>
      <!-- 登录框面板 -->
      <div id="loginForm" class="login fr" style="position: absolute; z-index: 2; right: 120px;">
        <div class="tip"><p>我们不会以任何理由要求您转账汇款，谨防诈骗。</p></div>
        <!-- 面板内容 -->
        <div class="title clearAfter usLogin">
          <span class="fl"><a href="#" class="curLogin">账号登录 <span style="color: #F4F4F4;">|</span></a></span>
          <span class="fr"><a href="#">扫码登录</a></span>
        </div>
        <div class="sCode" style="display: none;">
          <img src="img/codea.jpg"/>
          <p>打开手机 扫描二维码登录</p>
        </div>
        <div class="form">
          <!-- 登录表单 -->
          <form action="userLogin" method="post">
            <ul>
              <li class="user"><label for="name"></label><input type="text" id="name" name="account" value=""
                                                                placeholder="邮箱/用户名/已验证手机"/></li>
              <li class="password"><label for="pwd"></label><input type="password" id="pwd" name="password" value=""
                                                                   placeholder="密码"/></li>

              <li class="forgetpwd"><label class="fl"><input type="checkbox" name="autoLogin"/>自动登录</label><a href="">忘记密码</a>
              </li>
              <li class="submit"><input type="submit" value="登 录"/></li>
            </ul>
          </form>
        </div>
        <div class="footer">
          <div class="lx">
            <ul class="clearAfter">
              <li class="qq"><a href="#"> QQ</a></li>
              <li class="wx"><a href="#"> 微信</a></li>
            </ul>
          </div>
          <div class="zc fr"><a href="register.html">还没有账号？去注册</a></div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="bottom">
  <div class="center">
    <p><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">人才招聘</a> | <a href="#">商家入驻</a> | <a href="#">广告服务</a>
      | <a href="#">手机欣欣</a> | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a href="#">欣欣社区</a> | <a href="#">欣欣公益</a>
      | <a href="#">English Site</a>
      <br/>
      Copyright &copy;2004-2017 手机欣欣.com 版权所有</p>
  </div>
</div>
</body>
<script type="text/javascript">
  let message = null;
  new Vue({
    el: "#loginForm",
    mounted() {
      message = this.$message;
      //message.error("测试消息")
    }
  });
  //message.error("测试消息")
  //扫码账号登录切换
  let usLogin = document.getElementsByClassName("usLogin")[0];
  let loginBtn = usLogin.getElementsByTagName("a");
  let usCon = document.getElementsByClassName("form")[0];
  let smCon = document.getElementsByClassName("sCode")[0];

  for (let a = 0; a < loginBtn.length; a++) {
    loginBtn[a].index = a;
    loginBtn[a].onclick = function () {

      for (let r = 0; r < loginBtn.length; r++) {
        loginBtn[r].className = "";

      }
      loginBtn[this.index].className = "curLogin";
      if (a === 0) {
        usCon.style.display = "block";
        smCon.style.display = "none";
      }
      if (a === 1) {
        usCon.style.display = "none";
        smCon.style.display = "block";
      }
    }
  }
</script>
</html>
